<template>
  <div class="three-box" id="three-box"></div>
</template>

<script setup>
import { getCurrentInstance, onMounted } from "vue";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
let { proxy } = getCurrentInstance();
let THREE = proxy.$THREE;

onMounted(() => {
  const threeBox = document.getElementById("three-box");
  // 初始化场景
  var scene = new THREE.Scene();
  // 初始化相机
  var camera = new THREE.PerspectiveCamera(
    75,
    threeBox.clientWidth / threeBox.clientHeight,
    0.1,
    1000
  );
  // 设置相机位置
  camera.position.z = 0.1;
  // 初始化渲染器
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(threeBox.clientWidth, threeBox.clientHeight);
  //   renderer.shadowMap.enabled = true;
  // create a scene, that will hold all our elements such as objects, cameras and lights.

  //   initDefaultDirectionalLighting(THREE, scene);
  //   initDefaultLighting(THREE, scene);

  //   control.maxDistance = 1000;
  // 设置相机位置

  const geometry = new THREE.SphereGeometry(5, 32, 32);
  const rgbeLoader = new RGBELoader();

  rgbeLoader.load("/images/Living.hdr", (texture) => {
    const material = new THREE.MeshBasicMaterial({ map: texture });
    const sphere = new THREE.Mesh(geometry, material);
    sphere.geometry.scale(1, 1, -1);
    scene.add(sphere);
  });
  const control = new OrbitControls(camera, renderer.domElement); //鼠标交互、左键移动场景、滚轮放大缩小、右键平移
  control.enableDamping = true;
  threeBox.appendChild(renderer.domElement);
  render();

  //   initTexture2(scene);
  function render() {
    // stats.update();

    // control.maxDistance = 1000;

    // initTexture2(scene);
    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }
});

function initTexture(scene) {
  const geometry = new THREE.SphereGeometry(5, 32, 32);
  const rgbeLoader = new RGBELoader();

  rgbeLoader.load("/images/Living.hdr", (texture) => {
    const material = new THREE.MeshBasicMaterial({ map: texture });
    const sphere = new THREE.Mesh(geometry, material);
    sphere.geometry.scale(1, 1, -1);
    scene.add(sphere);
  });
}
</script>

<style>
.three-box {
  position: fixed;
  top: 0;
  left: 200px;
  right: 0;
  bottom: 0;
  width: 100%;
}
</style>
